<script type="text/javascript" src="js/jquery/infowindow.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		initializeGeoCoder();
		$("#map_canvas").hide();
		
		$("#add_user").validate({
			errorClass: "my-error-class",
			validClass: "my-valid-class",
			debug: false,
			rules: {
				name: "required",
				address: "required",
				contact_no: "required",
				email: {
						required: true,
						email: true
					},
				username: "required",
				password: {
						required: true,
						minlength: 8
					},
				confirm_password: {
						required: true,
						minlength: 8,
						equalTo: "#password"
					}
			},
			submitHandler: function(form){
				$.post("query/add_user.php", $("#add_user").serialize(), function(data){
					//alert("saved");
					window.location.replace("panel.php?page=preview_add_user&account_type="+$("#account_type").val()+"&name="+$("#name").val()+"&address="+$("#user_address").val()+"&contact_no="+$("#contact_no").val()+"&email="+$("#email").val()+"&username="+$("#username").val());
				});
			}
		});
		
			$("#username").keyup(function(){
				var username =  $("#username").val();
				
				if(username.length > 3){
					var status = false;
					$("#availability_status").html('<img src="images/loader.gif" align="absmiddle">&nbsp;Checking availability...');
					
					$.ajax({  //Make the Ajax Request
						type: "POST",  
						url: "query/check_duplicate.php",  //file name
						data: "username="+ username,  //data
						async: false,
						success: function(server_response){ 
							$("#availability_status").ajaxComplete(function(event, request){ 
								if(server_response == '0'){
									$("#availability_status").html('<img src="images/check_bullet.png" align="absmiddle"> <font color="Green"> Available </font>  ');
									status = true;
								}  else  if(server_response == '1'){
									$("#availability_status").html('<img src="images/cross.png" align="absmiddle"> <font color="red">Not Available </font>');
									status = false;
								} else{
									$("#availability_status").html('');
									alert("ERROR: "  + server_response);
									status = false;
								}
							});
						} 
					}); 
				}else{
					$("#availability_status").html('');
				}
				
				return status;
			})
		
		$(function(){
		$("#user_address").autocomplete({
			source: function(request, response){
				geocoder.geocode( {'address': request.term}, function(results, status){
					response($.map(results, function(item){
						var arr = item.formatted_address.split(",");
						return {
							label:  item.formatted_address,
							value:  $.trim(arr[0]),
							country: $.trim(arr[arr.length-1]),
							latitude: item.geometry.location.lat(),
							longitude: item.geometry.location.lng()
						}
					}));
				})
			},
		
		});
	 });
		
		
	});
</script>
<!--  start nav-outer-repeat................................................... END -->

  <div class='clear'></div>
<!-- start content-outer ........................................................................................................................START -->
	<div id='content-outer'>
	<!-- start content -->
	<div id='content'>

	<!--  start page-heading -->
	<div id='page-heading'>
		<div id="map_canvas"></div>
		<h1>Add User</h1>
	</div>
	<!-- end page-heading -->
	
	<table border='0' width='100%' cellpadding='0' cellspacing='0' id='content-table'>
	<tr>
		<th rowspan='3' class='sized'><img src='images/shared/side_shadowleft.jpg' width='20' height='300' alt='' /></th>
		<th class='topleft'></th>
		<td id='tbl-border-top'>&nbsp;</td>
		<th class='topright'></th>
		<th rowspan='3' class='sized'><img src='images/shared/side_shadowright.jpg' width='20' height='300' alt='' /></th>
	</tr>
	<tr>
		<td id='tbl-border-left'></td>
		<td>
		<!--  start content-table-inner ...................................................................... START -->
		<div id='content-table-inner'>
			<!--  start step-holder -->
			<div id="step-holder">
				<div class="step-no">1</div>
				<div class="step-dark-left"><a href="">Add User</a></div>
				<div class="step-dark-right">&nbsp;</div>
				<div class="step-no-off">2</div>
				<div class="step-light-left">Preview details</div>
				<div class="clear"></div>
			</div>
		<!--  end step-holder -->
		
			<!--  start table-content  -->
			<div id='table-content'>
				<form id="add_user" action="" method="post">
						<table border="0" cellpadding="0" cellspacing="0"  id="id-form" >
							<tr>
								<th valign="top">Account Type:</th>
								<td>
									<select id="account_type" name="account_type" style="width:190px; height:35px; padding:10px;" >
										<option name="admin" >Admin</option>
										<option name="user" >User</option>
									</select>
								</td>
							</tr>
							<tr>
								<th valign="top">Name:</th>
								<td><input type="text" id="name" name="name" autocomplete="off" class="inp-form" /></td>
							</tr>
							<tr>
								<th valign="top">Address:</th>
								<td><input type="text" id="user_address" name="user_address" autocomplete="off" class="inp-form" /></td>
							</tr>
							<tr>
							<tr>
								<th valign="top">Contact No:</th>
								<td><input type="text" id="contact_no" name="contact_no" autocomplete="off" class="inp-form" /></td>
							</tr>
							<tr>
								<th valign="top">Email:</th>
								<td><input type="text" id="email" name="email" autocomplete="off" class="inp-form" /></td>
							</tr>
							<tr>
								<th valign="top">Username:</th>
								<td><input type="text" id="username" name="username" autocomplete="off" class="inp-form" /></td>
								<td><span id="availability_status"></span></td>
							</tr>
							<tr>
								<th valign="top">Password:</th>
								<td><input type="password" id="password" name="password" autocomplete="off" class="inp-form" /></td>
							</tr>
							<tr>
								<th valign="top">Confirm Password:</th>
								<td><input type="password" id="confirm_password" name="confirm_password" autocomplete="off" class="inp-form" /></td>
							</tr>
							<tr>
								<th>&nbsp;</th>
								<td valign="top">
									<input type="submit" class="form-submit" />
									<input type="reset" class="form-reset"  />
								</td>
								<td></td>
							</tr>
					</table>
				</form>
			</div>
			<!--  end table-content  -->
	
			<div class='clear'></div>

		</div>
		<!--  end content-table-inner ............................................END  -->
		</td>
		<td id='tbl-border-right'></td>
	</tr>
	<tr>
		<th class='sized bottomleft'></th>
		<td id='tbl-border-bottom'>&nbsp;</td>
		<th class='sized bottomright'></th>
	</tr>
	</table>
	<div class='clear'>&nbsp;</div>

	</div>
	<!--  end content -->
	<div class='clear'>&nbsp;</div>
	</div>
	<!--  end content-outer........................................................END -->";
	//echo "Are you sure you want to delete this?";
	//echo "<br /><br />";
	//echo "<a href='confirm.php?id=".$_GET['id']."'>Yes</a> | <a href='panel.php?page=affiliate'>No</a>

			
	
<!--  start nav-outer-repeat................................................... END -->

  <div class="clear"></div>
 
<!-- start content-outer ........................................................................................................................START -->
<div id="content-outer">
<!-- start content -->
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer........................................................END -->

<div class="clear">&nbsp;</div>
    

